<!-- 零食类商品列表 -->
<template>
  <el-row>
    <h4>零食类商品列表</h4>
    <el-button type="success" size="default" @click="showDialog">添加商品</el-button>
  </el-row>
  <el-descriptions
    direction="vertical"
    border
    style="margin-top: 20px"
    v-for="(item, index) in scienceData"
    :key="index"
  >
    <el-descriptions-item :rowspan="2" :width="140" label="Photo" align="center">
      <img :src="item.photo" style="width: 100px; height: 100px" />
    </el-descriptions-item>
    <el-descriptions-item label="brandName">{{ item.brandName }}</el-descriptions-item>
    <el-descriptions-item label="introduction">{{ item.introduction }}</el-descriptions-item>
    <el-descriptions-item label="count">{{ item.count }}</el-descriptions-item>
    <el-descriptions-item label="operate">
      <el-button type="danger" size="small" @click="deleteBook(item.id as string)">下架</el-button>
      <el-button type="warning" size="small" @click="modifyBook(item)">修改</el-button>
      <el-button type="primary" size="small" @click="borrowBook(item)">出售</el-button>
    </el-descriptions-item>
  </el-descriptions>
  <Dialog
    @confirm="updateBooks"
    @cancel="
      (val: boolean) => {
        dialogVisible = val
      }
    "
    v-show="dialogVisible"
    :data="scienceData"
    :itemBook="itemBook"
  ></Dialog>
</template>

<script lang="ts" setup>
import { type Book, BookStatus, type BorrowBook } from '../../models/book'
import {
  initLocalStorage,
  getBooksData,
  deleteBookData,
  updateBookData,
} from '../../models/getBooksData'
import Dialog from '../CustomDialog.vue'
import { onMounted, onUpdated, ref } from 'vue'
const scienceData = ref<Book[]>([])

const itemBook = ref<Book | undefined>(undefined)

onMounted(async () => {
  try {
    const allBooks = getBooksData()
    scienceData.value = allBooks.filter(item => item.status == BookStatus.SCIENCE)
  } catch (error) {
    console.error('获取数据失败:', error)
    // 解析失败，重新获取数据
    initLocalStorage()
    const allBooks = getBooksData()
    scienceData.value = allBooks.filter(item => item.status == BookStatus.SCIENCE)
  }
})

// 封装更新数据
function gx() {
  const allBooks = getBooksData()
  scienceData.value = allBooks.filter(item => item.status == BookStatus.SCIENCE)
}

// 弹窗
const dialogVisible = ref(false)
const showDialog = () => {
  itemBook.value = undefined
  dialogVisible.value = true
}

// 子组件confirm传值
const updateBooks = (newBooks: Book[]) => {
  scienceData.value = newBooks.filter(item => item.status == BookStatus.SCIENCE)
}

// 删除图书
const deleteBook = (id: string) => {
  // 刷新数据
  if (deleteBookData(id)) {
    gx()
  }
}

// 修改图书
const modifyBook = (book: Book) => {
  itemBook.value = { ...book }
  dialogVisible.value = true
}

// 借阅图书
const bookList = ref<BorrowBook[]>(JSON.parse(localStorage.getItem('bookList') as string) || [])
const borrowBook = (book: Book) => {
  const allBooks = getBooksData()
  const targetBook = allBooks.find((b) => b.id === book.id)
  if (targetBook && targetBook.count > 0) {
    targetBook.count--
    if (targetBook.count !== 0) {
      updateBookData(targetBook)
      bookList.value.push({ book: targetBook, time: new Date().toLocaleString() })
      localStorage.setItem('bookList', JSON.stringify(bookList.value))
      gx()
    }
    if (targetBook.count === 0) {
      deleteBookData(targetBook.id as string)
      bookList.value.push({ book: targetBook, time: new Date().toLocaleString() })
      localStorage.setItem('bookList', JSON.stringify(bookList.value))
      gx()
    }
  }
}
</script>

<style scoped lang="scss">
.el-row {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
</style>
